<template>
	<view>
		<uni-popup ref="popupComment" background-color="#fff" :mask-click="false">
			<view class="popup-content">
				<view class="title">
					<view class="">热门评论（{{total}}）</view>
					<uni-icons type="closeempty" size="26" class="close" @tap="close"></uni-icons>
				</view>
				<scroll-view  scroll-y="true" class="scroll-Y">
					<block v-if="list.length">
						<view class="list" v-for="(item, index) in list" :key="index">
							<view class="list_left"><image :src="item.user.avatarUrl" mode=""></image></view> 
							<view class="list_right">
								<view class="list_right_top">
									<view class="list_right_top_left">
										<view>{{item.user.nickname}}</view>
										<view>{{item.time}}</view>
									</view>
									<view class="list_right_top_right">
										<text>{{item.likedCount}}</text>
										<uni-icons type="hand-up" size="18"></uni-icons>
									</view>
								</view>
								<view class="list_right_bottom">{{item.content}}</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="none">暂无评论</view>
					</block>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"u-popup-comment",
		props: {
			list: {
				type: Array,
				default: []
			},
			
			total: {
				type: Number,
				default: 0
			}
		}, 
		
		data() {
			return {

			};
		},
		
		mounted() {
			let refs = this.$refs.popupComment;
			
			setTimeout(() => {				
				uni.$on('popupComment', function(data){
					if(data == 'popupComment'){
						refs.open('bottom');
					}
				})
			},400);
		},
		
		methods: {
			close(){
				this.$refs.popupComment.close();
			}
		}
	}
</script>

<style>
	.scroll-Y {
		height: 300px;
	}
	
	.title{
		text-align: center;
		font-size: 14px;
		font-weight: bold;
		padding: 14px 0;
		position: relative;
	}
	
	.close{
		position: absolute;
		top: 5px;
		right: 2px;
		padding: 8px;
	}
	
	.list{
		display: flex;
		padding: 10px;
		border-bottom: 1px solid #ccc;
	}
	
	.list_left{
		margin-right: 2%;
	}
	
	.list_left image{
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	
	.list_right{
		width: 100%;
	}
	
	.list_right_top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1.6;
	}
	
	.list_right_top_left{
		font-size: 12px;
	}
	
	.list_right_top_right{
		display: flex;
		align-items: center;
		font-size: 12px;
	}
	
	.list_right_bottom{
		font-size: 13px;
		padding-top: 4px;
	}
	
	.none{
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		padding-top: 40px;
	}
</style>